<template>
  <div class="client-download">
    <div class="header-part">
      <img class="logo" src="@/assets/hkkeywspulgin/logo.png" alt="" srcset="">
      <span>{{logoTitle}}</span>
    </div>
    <div class="download-content">
      <div class="tips-part">
        <div class="img-text">
          <img class="tip-icon" src="@/assets/hkkeywspulgin/tips.png" alt="" srcset="">
          <span>未检测到{{logoTitle}}的KEY的驱动</span>
        </div>
        请确认是否已下载并安装KEY驱动
      </div>
      <div class="tab-part">
        选择系统版本
        <div class="tabs">
          <div
            v-for="item in sysList"
            :key="item.key"
            class="btn"
            :class="{ 'act-btn': item.key === currentTab }"
            @click="currentTab = item.key"
          >{{ item.label }}</div>
        </div>
      </div>
      <div class="download-part">
        <div
          v-for="(item, index) in downloadList"
          :key="index"
          class="download-item"
        >
          <div v-if="index < 4" class="info-text">
            <div class="client-name">{{ item.name }}</div>
            <div class="client-info">
              <span>客户端版本：{{ item.ver }}</span>
              <span>大小：{{ item.packageSize }}</span>
              <span> 更新日期：{{ item.createTime }}</span>
            </div>
          </div>
          <div class="download-btn" @click="downloadFile(item)">下载</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ClientDownload',
  data() {
    return {
      osData: {},
      tableData: {
        windows: [
          {
            name: 'hkkeywspulgin',
            filePath: '/static/key/hkkeywspulgin.exe',
            ver: '1.0.0',
            packageSize: '5.66MB',
            createTime: '2023/3/16 10:48'
          }
        ],
        kylin: [

          {
            name: 'hkkeywsplugin.930.ky10.aarch64',
            filePath: '/static/key/hkkeywsplugin.930.ky10.aarch64.rpm',
            ver: '1.0.1',
            packageSize: '1.82MB',
            createTime: '2023/3/16 10:48'
          },
        ],
        uos: [
          {
            name: 'hkkeywsplugin.930-ft2000-uos',
            filePath: '/static/key/hkkeywsplugin.930-ft2000-uos.deb',
            ver: '1.0.1',
            packageSize: '1.47MB',
            createTime: '2023/3/16 10:48'
          },
        ]
      },
      currentTab: 'windows',
      downloadList: [],
      logoTitle: window.logoTitle
    }
  },
  computed: {
    sysList() {
      return [{
        label: 'windows',
        key: 'windows'
      }, {
        label: '银河麒麟',
        key: 'kylin'
      }, {
        label: 'UOS统信',
        key: 'uos'
      }]
    }
  },
  created() {
    this.getDownloadList('windows')
  },
  watch: {
    currentTab(newValue) {
      this.downloadList = [] // 获取新downloadList
      this.getDownloadList(newValue)
    }
  },
  methods: {
    /** 判断类型获取数据 */
    getDownloadList(currentTab) {
      this.downloadList = currentTab in this.tableData ? this.tableData[currentTab] : []
    },
    downloadFile(item) {
      var suffix = item.filePath.substring(item.filePath.lastIndexOf('.')) // .exe
      var a = document.createElement('a');
      a.href = item.filePath;
      a.download = item.name + suffix;
      a.style.display = 'none';
      document.body.appendChild(a);
      a.click();
      a.remove();
    }
  }
}
</script>
<style lang="scss" scoped>
.client-download {
  height: 100vh;

  .header-part {
    height: 70px;
    font-family: SourceHanSansCN-Medium;
    font-size: 22px;
    color: #fff;
    font-weight: 500;
    display: flex;
    align-items: center;
    padding-left: 18.8%;
    background: #2a51e5;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.04);

    .logo {
      height: 36px;
      margin-right: 14px;
    }
  }

  .download-content {
    height: calc(100% - 70px);
    background: url(../../assets/hkkeywspulgin/bg.png) no-repeat;
    background-size: cover;

    .tips-part {
      font-family: SourceHanSansCN-Bold;
      font-size: 36px;
      color: #fff;
      text-align: center;
      line-height: 22px;
      font-weight: 700;
      padding-top: 7.8vh;
      box-sizing: border-box;
      margin-bottom: 6.9vh;

      .img-text {
        font-family: SourceHanSansCN-Medium;
        font-size: 30px;
        line-height: 40px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-bottom: 2vh;

        .tip-icon {
          width: 30px;
          margin-right: 12px;
        }
      }
    }

    .tab-part,
    .download-part {
      margin: 0 auto;
      width: 750px;
    }

    .tab-part {
      font-family: SourceHanSansCN-Medium;
      font-size: 18px;
      color: #fff;
      line-height: 20px;
      font-weight: 500;

      .tabs {
        margin-top: 2.2vh;
        margin-bottom: 2.9vh;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .btn {
          border: 1px solid #fff;
          border-radius: 4px;
          font-family: SourceHanSansCN-Medium;
          font-size: 22px;
          color: #fff;
          text-align: center;
          line-height: 22px;
          font-weight: 500;
          width: 220px;
          line-height: 56px;
          cursor: pointer;
        }

        .act-btn {
          background: #3fb2ff;
          box-shadow: 0px 0px 10px 4px rgba(75, 110, 239, 0.2);
          border: 1px solid #3fb2ff;
          color: #fff;
        }
      }
    }

    .download-part {
      .download-item {
        background: #fff;
        border: 1px solid rgba(255, 255, 255, 1);
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.06);
        border-radius: 4px;
        margin-bottom: 2vh;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 0 29px 0 25px;

        .info-text {
          font-family: SourceHanSansCN-Medium;
          font-size: 20px;
          color: #111;
          line-height: 22px;
          font-weight: 500;
          flex: 1;

          .client-info {
            font-family: SourceHanSansCN-Regular;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.65);
            line-height: 16px;
            font-weight: 400;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 18px;
          }
        }

        .download-btn {
          background: #fff;
          border: 1px solid rgba(43, 82, 229, 1);
          border-radius: 40px;
          width: 120px;
          height: 40px;
          line-height: 38px;
          text-align: center;
          flex-shrink: 0;
          cursor: pointer;
          margin-left: 4.4vw;
          font-family: SourceHanSansCN-Medium;
          font-size: 16px;
          color: #2B52E5;
          font-weight: 500;

          &:hover {
            background: #2B54E6;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
